<template>
    <div class="recommend">
        <!-- 笔记数据渲染的页面 -->
        <div class="box" v-for="(item,index) in list" :key="index">
        <router-link :to="{path:'/NoteDetail',query:{ id:item.id}}">
            <div class="top-img">
                <img class="cai_img" :src="item.image" alt="">
            </div>
        </router-link>
            <div class="but">
                <span class="title"> {{item.title}} </span>
                <div class="but-user">
                    <div class="but-user-name">
                    <img class="ren_img" :src="item.userimg" alt="">
                    <span class="user">{{item.username}}</span>
                </div>
                    <div class="love-box">
                        <img class="xing" v-if="item.inopent" src="../assets/img/xing_on.png" @click="goto(index)">
                        <img class="xing" v-else src="../assets/img/xing_no.png" alt=""  @click="goto(index)">
                         <span>{{item.love}}</span>
                    </div>
                </div>
            </div>
           
        </div>
        <div class="kong"></div>
    </div>
</template>
<script>
import {getnote} from "../api/index"
export default {
   data(){
       return{
           list:[],
       }
   },
   methods:{
    goto(index){
        console.log(this.list);
        let str = localStorage.getItem("note");
        let Arr = [];
        if (str) {
          Arr = JSON.parse(str);
        } else {
          Arr = [];
        }
        let arr = this.list[index];
        console.log(arr.id);
        
        if(this.list[index].inopent === false){
            this.list[index].inopent= true
            this.list[index].love = this.list[index].love+1
        let entry = {
        id:arr.id,
         arr
        };
        Arr.push(entry)
        localStorage.setItem("note", JSON.stringify(Arr));
        }else{
            this.list[index].inopent =false
            this.list[index].love = this.list[index].love-1
            console.log(Arr);
           let arrto = Arr.filter(item=>{
                console.log(item);
                return item.id != arr.id
            })
            Arr = arrto
            console.log(Arr);
            localStorage.setItem("note",JSON.stringify(Arr))

        }
        
        
    }
   },
     async created(){
       await getnote()
       .then(
         err=>{
             let {state,result:{list}} = err
             console.log(err);
             if(state == "success"){
                let nelist = list.filter(i=>{
                    return i.type==1
                })
                console.log(nelist);
                let arr = nelist.map(item=>{
                return {
                        username : item?.note?.author?.n,
                        userimg : item?.note?.author?.p,
                        love:item?.note?.like_count,
                        title:item?.note?.title,
                        image:item?.note?.image_u,
                        id:item?.note?.id,
                        inopent:false
                }

            })
            this.list= arr
             }
         }
       )
   }
}
</script>






<style lang="less" scoped>
@import "../assets/gong.less";
.kong{
    width: 100%;
    height: 35px;
}
.recommend{
    background-color: rgb(241, 248, 248);
    display: flex;
    flex-wrap: wrap;
}


.box{
    width: 45%;
    // height: 290px;
    margin: 10px 2%;
    border-radius: 10px;
    background-color: #fff;
    .top-img{
        .cai_img{
            width: 100%;
            height: 190px;
            border-top-right-radius:10px ;
            border-top-left-radius:10px ;
        }
    }
    .but{
        width: 100%;
        // height: 30%;
        padding: 5px;
        .title{
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            // height: 60%;
            // background-color: rgb(211, 109, 40);
        }
        span{
            font-size: @zhufont;
        }
        .love-box{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30%;
            span{
                margin-top: 5px; ;
            }
        }
        .but-user{
            .xing{
                width: 20px;
                height: 20px;
            }
            .user{
                  white-space:nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            span{
                font-size: 11px;
              
            }
            .ren_img{
                width: 20px;
                height: 20px;
                border-radius: 50%;
            }
            .but-user-name{
                width: 60%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                span{
                    margin-left:5px ;
                }
            }
            display: flex;
            line-height: 30px;
            align-items: center;
            justify-content: space-between;
        }


    }



}



</style>